<!DOCTYPE html>
<html lang="en">

<head>
	<title>Login</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--===============================================================================================-->
	<link rel="icon" type="image/png" href="assets/images/icons/favicon.ico" />
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/fonts/iconic/css/material-design-iconic-font.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/vendor/css-hamburgers/hamburgers.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/vendor/animsition/css/animsition.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/vendor/select2/select2.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/vendor/daterangepicker/daterangepicker.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/css/util.css">
	<link rel="stylesheet" type="text/css" href="assets/css/main.css">
	<!--===============================================================================================-->

</head>

<body>

	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100">
				<form class="login100-form validate-form" id="loginForm" action="">
					<span class="login100-form-logo">
						<i class="zmdi zmdi-landscape"></i>
					</span>

					<span class="login100-form-title p-b-34 p-t-27">
						Log in
					</span>
					<div class="contact100-form-checkbox">
						<div id="google_translate_element" style="text-align: center;"></div>
					</div>
					<div class="wrap-input100 validate-input" data-validate="Enter username">
						<input class="input100" type="text" name="username" placeholder="Username" id="userName">
						<span class="focus-input100" data-placeholder="&#xf207;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="Enter password">
						<input class="input100" type="password" name="pass" placeholder="Password" id="userPass">
						<span class="focus-input100" data-placeholder="&#xf191;"></span>
					</div>
					<div class="contact100-form-checkbox">
						<input class="input-checkbox100" id="ckb12" type="checkbox" name="show-password"
							onclick="showPassword()">
						<label class="label-checkbox100" for="ckb12">
							Show password
						</label>
					</div>

					<div class="container-login100-form-btn">
						<button class="login100-form-btn" type="submit">
							Login
						</button>
					</div>

					<div class="text-center p-t-90">
						<a class="txt1" onclick="forgotPass();">
							Forgot Password?
						</a>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!--===============================================================================================-->
	<script src="assets/vendor/jquery/jquery-3.2.1.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/vendor/animsition/js/animsition.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/vendor/bootstrap/js/popper.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/vendor/select2/select2.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/vendor/daterangepicker/moment.min.js"></script>
	<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
	<!--===============================================================================================-->
	<script src="assets/vendor/countdowntime/countdowntime.js"></script>
	<!--===============================================================================================-->
	<script src="assets/js/main.js"></script>
	<!--===============================================================================================-->
	<script src="assets/js/scripts.js" type="text/javascript"></script>
	<!--===============================================================================================-->
	<script type="text/javascript"
		src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	<!--===============================================================================================-->

	<script>

		$(document).ready(function () {
			$('#loginForm').submit(function (event) {
				event.preventDefault();

				var username = $('#userName').val();
				var password = $('#userPass').val();

				$.ajax({
					type: 'POST',
					dataType: 'json',
					data: ({ userName: username, userPass: password }),
					url: 'assets/php/login.php',

					success: function (responseData) {
						if (responseData.data.success == "successful") {

							userData = responseData.data.response;
							console.log(userData);
							alert("Login success!");
							setCookie("officerUID", userData.officerId);
							setCookie("officerName", userData.officerName);

							redirect("checkpoint.html");
						} else {
							alert("Password & Officername don't match!");
							window.reload();
						}
					}
				});
			})
		});

		function showPassword() {
			var x = document.getElementById("userPass");
			if (x.type === "password") {
				x.type = "text";
			} else {
				x.type = "password";
			}
		}

		function forgotPass(){
			var officerId = prompt("Enter your Official Officer ID");
			if(officerId !== null){
				$.ajax({
					method: "post",
					dataType: "json",
					data: ({officerId : officerId}),
					url: 'assets/php/forgotPass.php',
					
					success: function (responseData){
						if(responseData.data.success == "successful"){
							alert("Password has been send to your registered e-mail!");
						} else {
							alert("Credentials don't match, please contact the administrator!");
							window.reload();
						}
					}
				})
			}
		}
	</script>

	<script type="text/javascript">
		function googleTranslateElementInit() {
			new google.translate.TranslateElement({
				pageLanguage: 'en', includedLanguages: 'en,ml'
			}, 'google_translate_element');
		}
	</script>

</body>

</html>